<template>
  <el-dialog
    title="绘制部位"
    width="60%"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="beforeCloseHandle"
  >
    <el-container class="draw-container">
      <el-header class="toolbar">
        <el-button @click="close">上传</el-button>
      </el-header>
      <el-main
        v-loading="loading"
        class="plane"
        element-loading-text="图片加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div v-if="pictureList.length > 0 && currentPictureIndex > 0" class="plane-left plane-arrow">
          <i class="el-icon-arrow-left" @click="prevPicture" />
        </div>
        <div class="plane-center">
          <canvas-draw-polygon
            v-if="pictureList.length > 0 && currentPictureIndex < pictureList.length"
            ref="drawPlane"
            :background-img-url="pictureList[currentPictureIndex].url"
          />
          <el-upload
            v-else
            class="picture-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :multiple="false"
            :on-change="checkSelectFileHandle"
          >
            <!--              <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
            <i class="el-icon-plus picture-uploader-icon" />
          </el-upload>
        </div>
        <div v-if="currentPictureIndex < pictureList.length" class="plane-right plane-arrow">
          <i class="el-icon-arrow-right" @click="nextPicture" />
        </div>
      </el-main>
    </el-container>
    <div
      slot="footer"
      style="display: flex; justify-content: center;"
    >
      <el-button @click="close">关闭</el-button>
      <el-button
        type="primary"
        @click="save"
      >保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CanvasDrawPolygon from './CanvasDrawPolygon'
export default {
  name: 'DrawFloorPlan',
  components: {
    CanvasDrawPolygon
  },
  props: {
    show: { type: Boolean, default: false },
    layoutId: { type: String, default: '' }
  },
  data() {
    return {
      // 窗口开关标识
      dialogVisible: false,
      // 当前操作图片
      currentPictureIndex: 0,
      // 图片数组
      pictureList: [],
      loading: false
    }
  },
  watch: {
    show(val) {
      this.dialogVisible = val
    }
  },
  methods: {
    /**
     * 新增绘制图片
     */
    addDrawPicture() {

    },
    /**
     * 新增绘制图片
     * @param file 当前添加的文件
     * @param fileList 已存在的文件
     */
    checkSelectFileHandle(file, fileList) {
      this.loading = true
      const reader = new FileReader()
      reader.onload = (e) => {
        this.loading = false
        this.pictureList.push({ url: e.target.result })
      }
      reader.onloadstart = (e) => {
        this.loading = true
      }
      reader.onloadend = (e) => {
        this.loading = false
      }
      reader.readAsDataURL(file.raw)
    },
    /**
     * 上一张图片
     */
    prevPicture() {
      this.currentPictureIndex -= 1
    },
    /**
     * 下一张图片
     */
    nextPicture() {
      this.currentPictureIndex += 1
    },
    /**
     * 关闭窗口
     */
    close() {
      this.$refs.drawPlane.refresh()
      this.$emit('update:show', false)
      this.dialogVisible = false
      this.currentPictureIndex = 0
    },
    /**
     * 保存
     */
    save() {
      this.close()
    },
    /**
     * 关闭窗口前的操作
     */
    beforeCloseHandle() {
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
  .draw-container {
    height: 60vh;

    .toolbar {

    }
    .plane {
      padding: 0;
      display: flex;
      justify-content: space-between;
      .plane-arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        i {
          cursor: pointer;
        }
      }
      .plane-arrow:hover {
        font-size: 50px;
      }
      .plane-left {
        flex-basis: 60px;
      }
      .plane-center {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        width: 100%;
        .picture-uploader {
          width: 100%;
          height: 100%;
          /deep/ .el-upload--text {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .picture-uploader-icon {
            font-size: 80px;
            color: #8c939d;
          }
        }
      }
      .plane-right {
        flex-basis: 60px;
      }
    }
  }
</style>
